import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:my_meeting/main.dart';
import 'package:my_meeting/widget/confirm_widget.dart';

import '../../generated/assets.dart';
import '../../generated/l10n.dart';

typedef TimeSelectCallback = Function(String text);

class MeetDeviceTime extends StatefulWidget {
  MeetDeviceTime({super.key, this.callback, this.title});

  TimeSelectCallback? callback;

  String? title;

  @override
  State<MeetDeviceTime> createState() => _MeetDeviceTimeState();
}

class _MeetDeviceTimeState extends State<MeetDeviceTime> {
  var selectIndex = RxInt(-1);

  var titles = [
    S.current.deviceOpenSelect1,
    S.current.deviceOpenSelect2,
    S.current.deviceOpenSelect3,
    S.current.deviceOpenSelect4
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    selectIndex.value = getOpenIndex();
  }

  int getOpenIndex() {
    return titles.indexOf(widget.title ?? '');
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(),
          Container(
            height: 361.h,
            width: double.infinity,
            padding: EdgeInsets.symmetric(horizontal: 20.w),
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(8.r),
                    topRight: Radius.circular(8.r))),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(),
                    Text(
                      S.current.meetingDeviceOpen,
                      style: TextStyle(
                          color: const Color(0xFF333333),
                          fontSize: 14.sp,
                          fontWeight: FontWeight.w500),
                    ),
                    GestureDetector(
                      onTap: () {
                        Get.back();
                      },
                      child: SvgPicture.asset(
                        Assets.svgCancel,
                        width: 18,
                        height: 18,
                        color: const Color(0xFF333333),
                      ),
                    )
                  ],
                ).marginOnly(top: 10.h, bottom: 20.h),
                Expanded(
                  child: ListView.separated(
                      physics: const NeverScrollableScrollPhysics(),
                      itemCount: 4,
                      separatorBuilder: (context, index) {
                        return Container(
                          height: 10.h,
                        );
                      },
                      itemBuilder: (context, index) {
                        return GestureDetector(
                          onTap: () {
                            selectIndex.value = index;
                          },
                          child: Obx(() {
                            return Container(
                              height: 40.h,
                              alignment: Alignment.centerLeft,
                              decoration: BoxDecoration(
                                  border: Border.all(
                                      color: selectIndex.value == index
                                          ? const Color(0xFF1877FF)
                                          : const Color(0xFF333333)
                                              .withOpacity(0.2),
                                      width: 1),
                                  borderRadius: BorderRadius.circular(8.r)),
                              child: Text(
                                titles[index],
                                style: TextStyle(
                                    color: selectIndex.value == index
                                        ? const Color(0xFF1877FF)
                                        : const Color(0xFF666666),
                                    fontSize: 13.sp,
                                    fontWeight: FontWeight.w500),
                              ).marginOnly(left: 15.w),
                            );
                          }),
                        );
                      }),
                ),
                ConfirmWidget(
                  callback: () {
                    if (selectIndex.value == -1) {
                      return;
                    }
                    if (widget.callback != null) {
                      widget.callback!(titles[selectIndex.value]);
                    }
                    Get.back();
                  },
                ).marginOnly(bottom: 45.h)
              ],
            ),
          )
        ],
      ),
    );
  }
}
